import React, { PureComponent } from 'react'
import { connect } from 'dva';
import { Row, Col, Button } from 'antd';
import List from './components/List';
import Modal from './components/Modal';

class MenuIndex extends PureComponent {

    get tableProps() {
        const { dataSource, columns, visible } = this.props.menu
        const { dispatch } = this.props

        return {
            dataSource,
            columns,
            getTable: () => {
                dispatch({
                    type: 'menu/getDataSource',
                    payload: {
                        data: { t: new Date().getTime() },
                        method: 'GET'
                    }
                })
            },
            editDataSource: id => {
                dispatch({
                    type: 'menu/editDataSource',
                    action: id
                })
            },
            showModal: data => {
                dispatch({
                    type: 'menu/showModal',
                    action: {
                        visible: visible,
                        data: data
                    }
                })
            }
        }
    }

    get modalProps() {
        const { dataSource, modal, visible, confirmLoading, icons } = this.props.menu
        const { dispatch } = this.props

        return {
            dataSource,
            modal,
            visible,
            confirmLoading,
            icons,
            showModal: () => {
                dispatch({
                    type: 'menu/showModal',
                    action: {
                        visible: visible
                    }
                })
            },
            handleOk: data => {
                dispatch({
                    type: 'menu/handleOk',
                    action: data
                })
            }
        }
    }

    render() {
        const { visible } = this.props.menu

        const { dispatch } = this.props

        return (
            <div>
                <Row type='flex' justify='end' style={{ marginBottom: 30 }}>
                    <Button onClick={() => {
                        dispatch({
                            type: 'menu/showModal',
                            action: {
                                visible: visible
                            }
                        })
                    }}>新增</Button>
                </Row>
                <Row>
                    <Col xs={24} sm={24} md={24} xl={24}>
                        <List {...this.tableProps} />
                    </Col>
                </Row>
                <Modal {...this.modalProps} />
            </div>
        )
    }
}

const mapStateToProps = state => {
    return {
        menu: state.menu
    }
}
export default connect(mapStateToProps)(MenuIndex)